<template>
	<view class="page">
		<!-- 站名 -->
		<view class="row1">
			<u-row customStyle="margin-bottom: 10px">
				<u-col span="2.5">
					<view v-show="onlineState==='在线'" class="online"></view>
					<view v-show="onlineState==='离线'" class="offline"></view>
				</u-col>
				<u-col span="7.5">
					<view class="col_2">
						<view class="title">
							<!-- <view class="name">
								<text class="name_1">{{info.sname}}</text>
							</view> -->
							<view class="name2">
								<text class="name2_1">{{info.sname}} {{info.dir}}</text>
							</view>
							<!-- <view class="dir">
								<text class="dir_1">{{info.dir}}</text>
							</view> -->
							<view class="time">
								<text class="time_1">{{info.time}}</text>
							</view>
						</view>
					</view>
				</u-col>
				<u-col span="2">
					<image class="img" src="../../static/img/drive.png" mode="aspectFit" @click="drive"></image>
				</u-col>
			</u-row>
		</view>
		<!-- 位置 -->
		<view class="row2">
			<u-tag clss="tag" size="large" :text="info.pname" type="primary" plain></u-tag>
			<u-tag clss="tag" size="large" :text="info.street" type="primary" plain v-if="info.street!=''"></u-tag>
			<u-tag clss="tag" size="large" :text="info.terminalType" type="primary" plain></u-tag>
		</view>
		<!-- 按钮 -->
		<view class="row3">
			<view class="btn">
				<!-- <u-button class="btn_i" @click="btn1" shape="circle" text="故障处理"></u-button> -->
				<button class="btn_i" type="default" @click="btn1">维保</button>
			</view>
			<view class="btn">
				<button class="btn_i" type="default" @click="btn2">巡检</button>
			</view>
			<view class="btn">
				<button class="btn_i" type="default" @click="btn3">上下线记录</button>
			</view>
		</view>
		<!-- 线路 -->
		<view class="row4">
			<view class="tag1">
				<!-- <u-divider text="途经线路" textColor="#4D9D28" lineColor="#4D9D28"></u-divider> -->
			</view>
			<view class="tag2">
				<text class="tag_2">途经线路</text>
			</view>
			<view class="lines">
				<view v-for="(item,index) in lines" :key="index">
					<view style="margin-top: 8rpx;margin-right: 8rpx;">
						<u-tag :text="item" color="#4D9D28" borderColor="#4D9D28" plain></u-tag>
					</view>
				</view>
			</view>
			<!-- <u-grid :border="false" col="6">
				<u-grid-item v-for="(item,index) in lines" :key="index">
					<view clss="tv">
						<u-tag clss="tag" size="large" :text="item" color="#4D9D28" borderColor="#4D9D28" plain></u-tag>
					</view>
				</u-grid-item>
			</u-grid> -->
		</view>
		<!-- 基础信息 -->
		<view class="row5">
			<view class="tag1"></view>
			<view class="tag2">
				<text class="tag_2">基础信息</text>
				<view class="btn">
					<button class="btn_i" type="default" @click="btn4">编辑</button>
				</view>
			</view>
			<view>
				<u-row>
					<u-col span="4">
						<text class="text">电表位置</text>
					</u-col>
					<u-col span="8">
						<view class="text_v">
							<text class="text">{{info.ammeter}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<text class="text">钥匙号</text>
					</u-col>
					<u-col span="8">
						<view class="text_v">
							<text class="text">{{info.keynum}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<text class="text">IP（卡号）</text>
					</u-col>
					<u-col span="8">
						<view class="text_v">
							<text class="text">{{info.cardnum}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<text class="text">经纬度</text>
					</u-col>
					<u-col span="8">
						<view class="text_v">
							<text class="text">{{info.latitude}},{{info.longitude}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<text class="text">备注</text>
					</u-col>
					<u-col span="8">
						<view class="text_v">
							<text class="text">{{info.beizhu}}</text>
						</view>
					</u-col>
				</u-row>
				<!-- <uni-forms :modelValue="info">
					<uni-forms-item label="电表位置" name="ammeter" label-width="100">
						<text class="text">{{info.ammeter}}</text>
					</uni-forms-item>
				</uni-forms> -->
			</view>
		</view>
		<!-- 集中控制 -->
		<view class="row6">
			<view class="tag1"></view>
			<view class="tag2">
				<!-- <text class="tag_2">集中控制</text>
				<view class="btn">
					<button class="btn_i" type="default" @click="btn3">编辑</button>
				</view> -->
				<u-row>
					<u-col span="7">
						<text class="tag_2">集中控制</text>
					</u-col>
					<u-col span="2.5">
						<view class="btn">
							<button class="btn_i" type="default" @click="btn5">详细</button>
						</view>
					</u-col>
				</u-row>
			</view>
			<view>
				<u-row>
					<u-col span="4">
						<text class="text">站牌温度</text>
					</u-col>
					<u-col span="8">
						<view class="text_v">
							<text class="text">{{environment.fant1}},{{environment.fant2}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<text class="text">门禁</text>
					</u-col>
					<u-col span="8">
						<view class="text_v">
							<text class="text">{{environment.door}},{{environment.boli}}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="4">
						<text class="text">电流</text>
					</u-col>
					<u-col span="8">
						<view class="text_v">
							<text class="text">{{environment.ec24}}</text>
						</view>
					</u-col>
				</u-row>
				<!-- <uni-forms :modelValue="info">
					<uni-forms-item label="电表位置" name="ammeter" label-width="100">
						<text class="text">{{info.ammeter}}</text>
					</uni-forms-item>
				</uni-forms> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		transformFromWGSToGCJ
	} from '@/utils/WSCoordinate.js'
	import {
		device_info_now
	} from '@/api/common.js';
	import {
		control_state
	} from '@/api/common.js';
	export default {
		data() {
			return {
				id: '1',
				lines: [],
				info: {},
				environment: {},
				onlineState:'',
			}
		},
		onLoad: function(option) {
				console.log("onLoad:" + option.id +"--"+option.online)
			this.id = option.id
			this.onlineState = option.online
		},
		onShow() {
			this.device_info_now();
			this.control_state();
		},
		methods: {
			//站点信息获取
			device_info_now() {
				device_info_now(this.id).then(res => {
					console.log('站点信息'+JSON.stringify(res));
					this.info = res;
					if (res.line.length > 0) {
						this.lines = res.line.split(',')
					}
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			//环境状态
			control_state() {
				control_state({
					sid: this.id
				}).then(res => {
					console.log(res);
					this.environment = res;
				}).catch(err => {
					console.log(err);
					uni.showToast({
						title: err,
						icon: 'none'
					});
				})
			},
			//导航
			drive() {
				console.log('开始导航')
				//将WGS-84(国际标准)转为GCJ-02(火星坐标)
				var result = transformFromWGSToGCJ(this.info.latitude, this.info.longitude);
				uni.openLocation({
					name: this.info.sname,
					latitude: result.latitude,
					longitude: result.longitude,
					success: function() {
						console.log('success');
					},
					fail: function() {
						console.log('fail');
					}
				})
			},
			btn1() {
				console.log('故障处理...')
				uni.navigateTo({
					url: '/pages/fault_treatment/fault_treatment?info=' + JSON.stringify(this.info)
				})
			},
			btn2() {
				uni.navigateTo({
					url: '/pages/maintenance_service/maintenance_service?info=' + JSON.stringify(this.info)
				})
			},
			btn3() {
				uni.navigateTo({
					url: '/pages/device_iplog_one/device_iplog_one?id=' + this.id
				})
			},
			btn4() {
				uni.navigateTo({
					url: '/pages/device_info/device_info?info=' + JSON.stringify(this.info)
				})
			},
			btn5() {
				uni.navigateTo({
					url: '/pages/control_setting/control_info?id=' + this.info.id + "&sname=" + this.info.sname + "&dir=" + this.info.dir
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	$color_1: #4D9D28;
	$color_2: #32A38B;
	$color_3: #0E8CAE;

	.page {
		margin-top: 0rpx;
	}

	.row1 {
		height: 200rpx;
		width: 100vw;
		// background-color: cadetblue;

		.col_2 {
			height: 200rpx;
			position: relative;

			.title {
				height: 200rpx;
				position: absolute;

				.name {
					height: 120rpx;
					width: 368rpx;
					@include flex();

					.name_1 {
						color: $font-color;
						font-size: 40rpx;
					}
				}

				.name2 {
					height: 120rpx;
					width: 468rpx;
					@include flex();

					.name2_1 {
						color: $font-color;
						font-size: 40rpx;
					}
				}

				.dir {
					position: relative;
					height: 120rpx;
					width: 100rpx;
					left: 368rpx;
					bottom: 120rpx;
					@include flex();

					.dir_1 {
						color: $font-color;
						font-size: 40rpx;
					}
				}

				.time {
					position: relative;
					height: 60rpx;
					width: 468rpx;
					// bottom: 120rpx;
					@include flex();

					.time_1 {
						color: $font-color;
						font-size: 32rpx;
					}
				}
			}

		}

		.online {
			width: 80rpx;
			height: 80rpx;
			margin-left: 20rpx;
			background-color: #74D13D;
			border-radius: 50%;
		}
		.offline {
			width: 80rpx;
			height: 80rpx;
			margin-left: 20rpx;
			background-color: #ff0000;
			border-radius: 50%;
		}
		.img {
			width: 100rpx;
			height: 100rpx;
		}
	}

	.row2 {
		@include flex();
		justify-content: space-between;
		height: 60rpx;
		margin-top: 8rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;
	}

	.row3 {
		@include flex();
		justify-content: space-between;
		height: 80rpx;
		margin-top: 30rpx;
		margin-left: 10rpx;
		margin-right: 10rpx;

		.btn {
			width: 180rpx;

			.btn_i {
				height: 70rpx;
				background-color: #85C1FF;
				border-color: #3C9CFF;
				border-radius: 8rpx;
				color: white;
				font-size: 24rpx;
			}
		}
	}

	.row4 {
		width: 710rpx;
		margin-left: 10rpx;
		height: auto;
		// overflow: hidden;

		.tag1 {
			// margin-bottom: 0%;
			height: 1px;
			margin-top: 20rpx;
			background-color: $color_1;
		}

		.tag2 {
			height: 56rpx;
			margin-top: 12rpx;

			.tag_2 {
				font-size: 36rpx;
				color: $color_1;
			}
		}

		.lines {
			padding-left: 8rpx;
			/* 设置容器为flex */
			@include flex();
			justify-content: flex-start;
			flex-wrap: wrap; //正常换行
		}
	}

	.row5 {
		width: 710rpx;
		margin-left: 10rpx;
		height: auto;

		.tag1 {
			// margin-bottom: 0%;
			height: 1px;
			margin-top: 20rpx;
			background-color: $color_2;
		}

		.tag2 {
			height: 56rpx;
			margin-top: 12rpx;
			@include flex();
			justify-content: space-between;

			.tag_2 {
				font-size: 36rpx;
				color: $color_2;
			}

			.btn {
				width: 140rpx;

				.btn_i {
					height: 64rpx;
					background-color: $color_2;
					border-color: $color_2;
					border-radius: 8rpx;
					color: white;
					font-size: 24rpx;
				}
			}
		}

		.text_v {
			position: relative;
			height: 60rpx;
			@include flex();
		}

		.text {
			color: $color_2;
			font-size: 26rpx;
		}

	}

	.row6 {
		width: 710rpx;
		margin-left: 10rpx;
		height: auto;

		.tag1 {
			// margin-bottom: 0%;
			height: 1px;
			margin-top: 20rpx;
			background-color: $color_3;
		}

		.tag2 {
			height: 56rpx;
			margin-top: 12rpx;
			// @include flex();
			// justify-content: space-between;
		}

		.tag_2 {
			font-size: 36rpx;
			color: $color_3;
		}

		.btn {
			width: 140rpx;

			.btn_i {
				height: 64rpx;
				background-color: $color_3;
				border-color: $color_3;
				border-radius: 8rpx;
				color: white;
				font-size: 24rpx;
			}
		}

		.text_v {
			position: relative;
			height: 60rpx;
			@include flex();
		}

		.text {
			color: $color_3;
			font-size: 26rpx;
		}

	}
</style>